<!-- d点坐标详情组件 -->
<template>
    <div>
        <div v-if="menuTopData" class="bottom-menu-container">
            <div class="item" v-for="(item, index) in menuTopData" :key="index">
                <img :src="item.img">
                <div class="item-content">
                    <div class="title">
                        {{ item.title }}
                    </div>
                    <div class="num">
                        {{ item.num }}<span class="unit">{{ unit }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="menuBottomLeftData" class="bottom-menu-left-container">
            <div class="item" v-for="(item, index) in menuBottomLeftData" :key="index">
                <img :src="item.img"><span>{{ item.title }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
//传入的属性
const { } = defineProps({
    //顶部数据
    menuTopData: {
        type: Array,
        default: null
    },
    //底部数据
    menuBottomLeftData: {
        type: Array,
        default: null
    },
    //顶部数据
    unit: {
        type: String,
        default: '个'
    }
})
</script>
<style scoped lang="less">
.bottom-menu-container {
    position: absolute;
    display: inline-flex;
    justify-content: space-around;
    width: 836px;
    left: 542px;
    top: 95px;
    border-radius: 8px;
    background-color: #11387052;
    box-shadow: 0 0 1px 3px #15C0F629;
    align-items: center;
    padding: 10px;

    .item {
        display: inline-block;

        img {
            display: inline-block;
            width: 56px;
            height: 56px;
            margin-right: 15px;
        }

        .item-content {
            display: inline-block;

            .title {
                font-size: 14px;
                line-height: 20px;
            }

            .num {
                text-align: left;
                font-family: 'Furore';
                font-style: normal;
                font-weight: 400;
                font-size: 24px;
                line-height: 28px;
                color: #FFFFFF;

                .unit {
                    margin-left: 3px;
                    font-size: 12px;
                    line-height: 17px;
                }
            }

        }
    }
}

.bottom-menu-left-container {
    position: absolute;
    bottom: 32px;
    left: 456px;
    border: dashed 1px #01CEFFA3;
    border-radius: 8px;
    padding: 12px 20px;

    .item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        img {
            display: inline-block;
            width: 28px;
            height: 40px;
            margin-right: 10px;
        }

    }
}
</style>